<div class="row"  style="position:relative;">
        <div>  
          <div class="row flex-items-xs-right rightPos">
            <div class="flex-xs-middle option-right">
              <hbr-filter [withDivider]="true" filterPlaceholder="{{'VULNERABILITY.PLACEHOLDER' | translate}}" (filterEvt)="filterVulnerabilities($event)"></hbr-filter>  
              <span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <clr-datagrid>
              <clr-dg-action-bar>
                <button type="button" class="btn btn-sm btn-secondary" (click)="scanNow()"><clr-icon shape="shield-check" size="16"></clr-icon>&nbsp;{{'VULNERABILITY.SCAN_NOW' | translate}}</button>
              </clr-dg-action-bar>
              <clr-dg-column [clrDgField]="'id'">{{'VULNERABILITY.GRID.COLUMN_ID' | translate}}</clr-dg-column>
              <clr-dg-column [clrDgField]="'severity'">{{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}}</clr-dg-column>
              <clr-dg-column [clrDgField]="'package'">{{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}}</clr-dg-column>
              <clr-dg-column [clrDgField]="'version'">{{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}}</clr-dg-column>
              <clr-dg-column [clrDgField]="'fixedVersion'">{{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}}</clr-dg-column>
      
              <clr-dg-placeholder>{{'VULNERABILITY.GRID.PLACEHOLDER' | translate}}</clr-dg-placeholder>
              <clr-dg-row *clrDgItems="let res of scanningResults">
                  <clr-dg-cell><a href="{{res.link}}" target="_blank">{{res.id}}</a></clr-dg-cell>
                  <clr-dg-cell [ngSwitch]="res.severity">
                    <span *ngSwitchCase="5" class="label label-danger">{{severityText(res.severity) | translate}}</span>
                    <span *ngSwitchCase="4" class="label label-medium">{{severityText(res.severity) | translate}}</span>
                    <span *ngSwitchCase="3" class="label label-low">{{severityText(res.severity) | translate}}</span>
                    <span *ngSwitchCase="1" class="label">{{severityText(res.severity) | translate}}</span>
                    <span *ngSwitchDefault>{{severityText(res.severity) | translate}}</span>
                  </clr-dg-cell>
                  <clr-dg-cell>{{res.package}}</clr-dg-cell>
                  <clr-dg-cell>{{res.version}}</clr-dg-cell>
                  <clr-dg-cell>
                       <div *ngIf="res.fixedVersion; else elseBlock">
                          <clr-icon shape="wrench" class="is-success" size="20"></clr-icon>&nbsp;<span class="font-color-green">{{res.fixedVersion}}</span>
                       </div>
                      <ng-template #elseBlock>{{res.fixedVersion}}</ng-template>
                  </clr-dg-cell>
                  <clr-dg-row-detail *clrIfExpanded>
                  {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}}
                  </clr-dg-row-detail>
              </clr-dg-row>
      
              <clr-dg-footer>
                  <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}}</span>
                   {{pagination.totalItems}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}}
                  <clr-dg-pagination #pagination [clrDgPageSize]="25" [clrDgTotalItems]="scanningResults.length"></clr-dg-pagination>
              </clr-dg-footer>
          </clr-datagrid>
        </div>
      </div>